<template>
  <view class="container">
    <view class="demo-header">
      <text class="title">城市选择插件示例</text>
    </view>
    
    <view class="demo-content">
      <view class="section">
        <text class="section-title">多选模式</text>
        <view class="selected-cities">
          <view v-if="selectedCities.length > 0" class="cities-list">
            <view v-for="city in selectedCities" :key="city.id" class="city-tag">
              {{ city.name }}
              <uni-icons type="close" size="12" color="#999" @click.stop="removeCity(city)"></uni-icons>
            </view>
          </view>
          <view v-else class="placeholder">
            请选择城市
          </view>
        </view>
        <button class="select-btn" @click="openCitySelector">选择城市</button>
      </view>
      
      <view class="section">
        <text class="section-title">单选模式</text>
        <view class="selected-city">
          <text>{{ singleSelectedCity ? singleSelectedCity.name : '请选择城市' }}</text>
        </view>
        <button class="select-btn" @click="openSingleCitySelector">选择城市</button>
      </view>
    </view>
    
    <!-- 多选城市选择器 -->
    <zmt-select-city
      ref="citySelector"
      title="选择城市"
      :multiple="true"
      :selected-cities="selectedCities"
      @confirm="onConfirm"
      @close="onClose"
    ></zmt-select-city>
    
    <!-- 单选城市选择器 -->
    <zmt-select-city
      ref="singleCitySelector"
      title="选择城市"
      :multiple="false"
      :selected-cities="[singleSelectedCity]"
      @confirm="onSingleConfirm"
      @close="onClose"
    ></zmt-select-city>
  </view>
</template>

<script>
import zmtSelectCity from '../components/zmt-select-city.vue';

export default {
  components: {
    zmtSelectCity
  },
  data() {
    return {
      // 多选模式下选中的城市
      selectedCities: [],
      // 单选模式下选中的城市
      singleSelectedCity: null
    };
  },
  methods: {
    // 打开多选城市选择器
    openCitySelector() {
      this.$refs.citySelector.open();
    },
    
    // 打开单选城市选择器
    openSingleCitySelector() {
      this.$refs.singleCitySelector.open();
    },
    
    // 多选模式确认选择
    onConfirm(cities) {
      this.selectedCities = cities;
      console.log('选中的城市:', cities);
    },
    
    // 单选模式确认选择
    onSingleConfirm(cities) {
      this.singleSelectedCity = cities[0] || null;
      console.log('选中的城市:', this.singleSelectedCity);
    },
    
    // 关闭选择器
    onClose() {
      console.log('关闭城市选择器');
    },
    
    // 移除选中的城市
    removeCity(city) {
      const index = this.selectedCities.findIndex(item => item.id === city.id);
      if (index > -1) {
        this.selectedCities.splice(index, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
  
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}

.demo-content {
  .section {
    margin-bottom: 30px;
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
    }
    
    .selected-cities,
    .selected-city {
      min-height: 40px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 12px;
      
      .placeholder {
        color: #999;
        font-size: 14px;
      }
      
      .cities-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .city-tag {
          display: inline-flex;
          align-items: center;
          padding: 4px 10px;
          background-color: #fff;
          border-radius: 16px;
          font-size: 14px;
          color: #333;
          border: 1px solid #eee;
          
          .uni-icons {
            margin-left: 4px;
          }
        }
      }
      
      text {
        font-size: 14px;
        color: #333;
      }
    }
    
    .select-btn {
      width: 100%;
      background-color: #007aff;
      color: #fff;
      border-radius: 8px;
    }
  }
}
</style>